<template>
    <back-top title="我的收藏"></back-top>
    <div class="favor">
        <div v-for="(item,index) in items" :key="item.id">
            <favor-top :item="item" :index="index" v-if="selectList[index]"></favor-top>
            <div class="title">{{ item.unitName }}</div>
            <div class="price">
                <div class="finalPrice">￥ {{ item.finalPrice }}</div>
                <div class="productPrice">￥ {{ item.productPrice }}</div>
                <div class="priceTag">{{ item.priceTipBadge?.text }}</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import useFavorStore from '@/stores/modules/favor';
import { storeToRefs } from 'pinia';
import FavorTop from './kids/FavorTop.vue';
import BackTop from '@/components/BackTop/BackTop.vue';


const favorStore = useFavorStore()
if (favorStore.items.length === 0) favorStore.getItem()
const {items,selectList} = storeToRefs(favorStore)


</script>

<style lang="less" scoped>

.favor {
    padding: 10px;
    margin: 22px 0 ;
    .title {
        padding:10px 0;
    }
    .price {
            display: flex;
            margin-bottom: 20px;
            .finalPrice {
                color: orange;
                font-size: 16px;
                padding-right: 6px;
            }
            .productPrice {
                text-decoration: line-through;
                color: #777;
                font-style: 12px;
                padding-right: 6px;
            }
            .priceTag {
                font-size: 14px;
                background-image: linear-gradient(270deg,#f66,#ff9f9f);
                color: #fff;
                border-radius: 8px;
                padding: 0 5px;
                text-align: center;
            }
        }
}

</style>